<template>
  <div class="strut-div">
    <div class="item-top-country">
      <span class="time">时间：{{ nowDate }}</span>
      <!-- <span style="float: right;">
        <el-radio-group v-model="countryType" size="mini">
          <el-radio-button label="假日市场"></el-radio-button>
          <el-radio-button label="文旅景点"></el-radio-button>
        </el-radio-group>
      </span> -->
    </div>
    <div id="country-source" style="height: 336px;"></div>
  </div> 
</template>

<script>
import echarts from 'echarts';

export default {
  components: {},
  data() {
    return {
      countryType: '假日市场',
      nowDate: '',
      startDate: '',
      endDate: '',
      chart: null,
      strarrNameBar:[],
      strarrValueBar1: []
    };
  },
  mounted() {
    this.nowDate = new Date().format('yyyy年mm月dd日');
    this.startDate = new Date().format('yyyy-mm') + '-01';
    this.endDate = new Date().format('yyyy-mm-dd');
    this.chart = echarts.init(document.getElementById('country-source'));

    this.getReceptionNumRange();
  },
  methods: {
    initChart() {
      let option = {
        title: {
          text: '',
          subtext: ''
        },
        barWidth: 12,
        itemGap: 20,
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: '', // 默认为直线，可选为：'line' | 'shadow' | ''空值没背影
          },
        },
        grid: {
          left: '2%',
          right: '5%',
          bottom: '3%',
          top:'2%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,

          data: this.strarrNameBar,
          axisLine: {
            show: false
          },
          axisLabel:{
            fontSize:16,
          },
          nameTextStyle:{
            fontSize:18,
            align:'left',
          }
        },
        series: [
          {
            name: '来源百分比',
            type: 'bar',
            data: this.strarrValueBar1,
            itemStyle: {
              normal: {
                barBorderRadius: 6,
                color: new echarts.graphic.LinearGradient(
                  0, 0, 1, 0,
                  [
                    {offset: 0, color: '#029ED8'},
                    {offset: 1, color: '#20D8BC'}
                  ]
                ),
                label: {
                  show: true,   //显示文本
                  position: 'right',  //数据值位置
                  textStyle: {
                    color: '#FBCC13',
                    fontSize: '16'
                  },
                  formatter: '{c}%'
                }
              },
              emphasis: {
                barBorderRadius: 4
              }
            },
          }
        ],
        textStyle: {
          color: '#E9F4FF'
        }
      };

      setTimeout(() => {
        this.chart.setOption(option);
      }, 300);
    },
    getReceptionNumRange() {
      let that = this;
      let _url = this.$api.getReceptionNumRange;
      let _param = {
        dataSource: '04',
        sFJNM: '00010001001400090001',
        sAreaType: '03',
        sObjName: '全部',
        sSelName: '全部',
        sObjType: '02',
        startDate: this.startDate,
        endDate: this.endDate
      }

      this.$jquery.ajax({
        type: 'post',
        url:_url,
        dataType: 'json',
        data: _param,
        contentType:'application/x-www-form-urlencoded; charset=UTF-8',
        cache: false,
        success: function (res) {
          if (res.retCode === 200) {
            let data = res.retData.listData;
            that.strarrNameBar = data.strarrNameBar;
            that.strarrValueBar1 = data.strarrValueBar1;
            that.initChart();
          }
        }
      });
    }
  }
};
</script>

<style>
.item-top-country {
  padding: 10px 20px;
}
.item-top-country .time {
  font-size: 22px;
  color: #C1D0FF;
}

.item-top-country .el-radio-button--mini .el-radio-button__inner {
  font-size: 18px;
}

.item-top-country .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  /* border-image: linear-gradient(0deg, rgba(2, 159, 216, 1), rgba(31, 213, 189, 1)) 10 10; */
  border-color: rgba(20, 180, 200, 1);
  background: linear-gradient(90deg, rgba(2, 159, 216, 1) 0%, rgba(31, 213, 189, 1) 100%);
}
.item-top-country .el-radio-button__inner:hover {
  color: rgba(20, 180, 200, 1);
}
.item-top-country .el-radio-button__inner {
  background: rgba(0, 0, 0, 0.01);
  border-color: rgba(20, 180, 200, 1);
  padding: 5px 12px;
  color: #fff;
}
.item-top-country .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 8px 0 0 8px;
}
.item-top-country .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 8px 8px 0;
}
</style>
